<template>
  <div>
    <button @click="changeMsg">按钮</button>
    {{ msg }}
  </div>
</template>

<script>
// import { ref } from 'vue'
import { reactive, toRefs } from 'vue'
export default {
  // 运行在实例创建完成之前 这里面无法调用this
  setup (props, { attrs, slots, emit }) {
    // 通过ref 定义响应式数据
    /* const msg = ref('你好vue3')
    const changeMsg = () => {
      msg.value = '数据改变啦'
    }
    return {
      msg,
      changeMsg
    } */
    // 通过reactive批量定义多个数据 结合 toRefs
    const data = reactive({
      msg: '你好vue3',
      msg2: '数据2',
      changeMsg: () => {
        data.msg = '数据改变啦'
      }
    })
    const dataRefs = toRefs(data)
    return {
      ...dataRefs
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
